<template>
	<div>
	  <div class="detail-wrapper">
	    <div class="detail-img" v-if="DetailSale.img_view" v-bind:style="{backgroundImage: 'url(' + DetailSale.img_view[0]+'?imageView2/2/w/400)'}"></div>
	    <div class="detali-ifo">
	    	<div class="ifo-line-one">
	    		<div class="name ellipsis-2">
	    			<span class="pre-sale" v-show="DetailSale.sale_type==2">预售</span>
	    			<span class="tittle">{{DetailSale.kind_name}}{{DetailSale.title}}</span>
	    		</div>
	    		<div class="share" @click="shareopen">
	    			<i class="share-icon"></i>
	    			<span>分享</span>
	    		</div>
	    	</div>
	    	<div class="ifo-line-two">
	    		<div class="price">
	    			<label v-if="DetailSale.price">
	    				<big>{{DetailSale.price}}</big>
		    			<span class="unit-price">元/斤</span>
	    			</label>
	    			<label v-else>
	    				<span class="mianyi">面议</span>
		    		</label>
	    			<span class="pre-date" v-show="DetailSale.sale_type==2">10月中旬上市</span>
	    		</div>
	    		<div class="size ellipsis">
	    			<span>规格：</span>
	    			<label v-if="DetailSale.size_unit_name">{{DetailSale.size_min}}-{{DetailSale.size_max}}{{DetailSale.size_unit_name}}</label>
	    			<label v-else>不限</label>
	    		</div>
	    	</div>
	    	<div class="ifo-line-three">
	    		<div class="foods-address">
	    			<i class="address-icon"></i>
						<span>{{DetailSale.province_name}}</span>
						<span>{{DetailSale.city_name}}</span>
	    		</div>
	    		<div class="read-time"><span>{{DetailSale.pv}}</span>次查看</div>
	    	</div>
	    	<div class="ifo-line-four">
	    		<div class="ifo-report" v-show="DetailSale.report>=0">
	    			<label v-if="!isReport" @click="report">
	    				<i class="report-icon"></i>
	    				<span>举报</span>
	    			</label>
	    			<label class="report-done" v-else>
	    				<i class="report-icon-done"></i>
	    				<span>已举报</span>
	    			</label>
	    		</div>
	    		<div class="update-time">{{DetailSale.updated_view}}</div>
	    	</div>
	    </div>
	    <div class="detali-foods-seller">
	    	<div class="seller-icon">
	    		<img v-if="DetailsellShop.avatar_view" :src="DetailsellShop.avatar_view+'?imageView2/2/w/50'"/>
	    	</div>
	    	<div class="seller-msg">
    			<label class="name ellipsis">
					<span v-if="DetailsellShop.verify_classify" >{{DetailsellShop.verify_name}}</span>
					<span v-else>{{DetailsellShop.contact_name}}</span>
				</label>
	    		<span class="verify-type firm-jxs" v-if="DetailsellShop.verify_classify==2&&DetailsellShop.verify_type==3"></span>
				<span class="verify-type firm-pfs" v-if="DetailsellShop.verify_classify==2&&DetailsellShop.verify_type==13"></span>
				<span class="verify-type own-jxs" v-if="DetailsellShop.verify_classify==1&&DetailsellShop.verify_type==3"></span>
				<span class="verify-type own-pfs" v-if="DetailsellShop.verify_classify==1&&DetailsellShop.verify_type==13"></span>
				<span class="verify-type own-yf" v-if="DetailsellShop.verify_classify==1&&DetailsellShop.verify_type==12"></span>
				<span class="verify-type own-ywy" v-if="DetailsellShop.verify_classify==1&&DetailsellShop.verify_type==2"></span>
				<span class="verify-type own-yzh" v-if="DetailsellShop.verify_classify==1&&DetailsellShop.verify_type==4"></span>
				<span class="verify-type own-yzj" v-if="DetailsellShop.verify_classify==1&&DetailsellShop.verify_type==11"></span>
	    	</div>
	    	<div class="seller-shop">
	    		<router-link :to="{ path: '/trade/shop/'+ DetailsellShop.id}">
		    		<span class="text">进店铺</span>
		    		<i class="enter-icon"></i>
	    		</router-link>
	    	</div>
	    </div>
	    <div class="detail-tab">
	    	<tab>
		      <tab-item selected @on-item-click="onItemClick">图文详情</tab-item>
		      <tab-item @on-item-click="onItemClick">本店其他供应</tab-item>
		    </tab>
		    <div class="tab-item" v-show="nowIndex===0">
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">信息编号</div>
		    			<div class="msg-right">{{DetailSale.sn}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">供应品种</div>
		    			<div class="msg-right">{{DetailSale.kind_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg" v-if="DetailSale.size_min || DetailSale.size_max">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">规格</div>
		    			<div class="msg-right">{{DetailSale.size_min}}-{{DetailSale.size_max}}{{DetailSale.size_unit_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg" v-if="DetailSale.sale_type==2">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">上市时间</div>
		    			<div class="msg-right">{{DetailSale.sale_pre.month}}月{{DetailSale.sale_pre.day}}上市</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">供货数量</div>
		    			<div class="msg-right">{{DetailSale.stock}}斤</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">供货地址</div>
		    			<div class="msg-right">{{DetailSale.province_name}}{{DetailSale.city_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b" v-if="DetailSale.desc_tag!= null&&DetailSale.desc_tag.length>0 || DetailSale.desc">
		    			<div class="msg-left">补充说明</div>
		    			<div class="msg-right">
  							<span class="need-bq" v-for="tab in DetailSale.desc_tag">{{tab}}</span>
  							<label>{{DetailSale.desc}}</label>
		    			</div>
		    		</div>
		    	</div>
		    	<div class="img-wrapper">
	    			<div class="img" v-for="picdata in DetailSale.img_view" :key="picdata.id">
						<img :src="picdata + '?imageView2/2/w/500'" />
					</div>
		    	</div>
		    	<div class="detail-list-remand" v-show="supplyMore.length">
		    		<div class="column vux-1px-b">
		    			<i class="column-icon"></i>
		    			<span>为你推荐</span>
		    		</div>
		    		<div v-if="supplyMoreloading == true" class="load_wrap" >
						<i class="fa fa-spinner fa-pulse"></i>
						数据加载中...
					</div>
					<div class="supply-list-item vux-1px-b" v-for="(data,index) in supplyMore" v-else>
						<router-link :to="{ path: '/trade/supply/'+ data.id}">
							<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
							<div class="item-ifo">
								<div class="ifo-wrap">
									<div class="ifo-wrap-cell">
										<div class="goods-msg clearfix">
											<div class="goods-name ellipsis-2">
												<i class="pre-label" v-show="data.sale_type==2">预售</i>
												<span class="name">{{data.kind_name}}{{data.title}}</span>
											</div>
											<div class="goods-price">
												<div class="pre-date ellipsis" v-if="data.sale_type==2">
													<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
												</div>
												<div class="price" v-else>
													<label v-if="data.price_type==2" class="face">面议</label>
													<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
												</div>
											</div>
										</div>
										<div class="goods-from">
											<div class="goods-address ellipsis">
												<i class="address-icon"></i>
												<span>{{data.province_name}}</span>
												<span>{{data.city_name}}</span>
											</div>
											<div class="goods-size">
												<label <label v-if="data.size_unit_name">
													<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
												</label>
												<label v-else>规格不限</label>
											</div>
										</div>
										<div class="goods-seller">
											<div class="seller">
												<label class="name ellipsis">
													<span v-if="data.verify_classify" >{{data.verify_name}}</span>
													<span v-else>{{data.contact_name}}</span>
												</label>
												<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
												<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
												<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
												<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
												<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
												<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
												<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
												<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
											</div>
											<div class="data ellipsis">{{data.updated_view}}</div>
										</div>
									</div>
								</div>
							</div>
						</router-link>
					</div>
		    	</div>
		    </div>
	    	<div class="tab-item" v-show="nowIndex===1">
	    		<div v-if="Detailloading == true && DetailStatus === 'loading'" class="load_wrap" >
					<i class="fa fa-spinner fa-pulse"></i>
					数据加载中...
				</div>
				<div v-else-if="DetailStatus === 'noData'" class="load_wrap">
					<div class="no-data">暂无数据</div>
				</div>
				<div v-else-if="DetailStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
					<i class="fa fa-frown-o"></i>
					加载失败，点击刷新
				</div>
				<div class="supply-list-item vux-1px-b" v-for="(data,index) in DetailsellList" v-else>
					<router-link :to="{ path: '/trade/supply/'+ data.id}">
						<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
						<div class="item-ifo">
							<div class="ifo-wrap">
								<div class="ifo-wrap-cell">
									<div class="goods-msg clearfix">
										<div class="goods-name ellipsis-2">
											<i class="pre-label" v-show="data.sale_type==2">预售</i>
											<span class="name">{{data.kind_name}}{{data.title}}</span>
										</div>
										<div class="goods-price">
											<div class="pre-date ellipsis" v-if="data.sale_type==2">
												<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
											</div>
											<div class="price" v-else>
												<label v-if="data.price_type==2" class="face">面议</label>
												<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
											</div>
										</div>
									</div>
									<div class="goods-from">
										<div class="goods-address ellipsis">
											<i class="address-icon"></i>
											<span>{{data.province_name}}</span>
											<span>{{data.city_name}}</span>
										</div>
										<div class="goods-size">
											<label <label v-if="data.size_unit_name">
												<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
											</label>
											<label v-else>规格不限</label>
										</div>
									</div>
									<div class="goods-seller">
										<div class="seller">
											<label class="name ellipsis">
												<span v-if="data.verify_classify" >{{data.verify_name}}</span>
												<span v-else>{{data.contact_name}}</span>
											</label>
											<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
											<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
											<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
											<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
											<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
											<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
											<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
											<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
										</div>
										<div class="data ellipsis">{{data.updated_view}}</div>
									</div>
								</div>
							</div>
						</div>
					</router-link>
				</div>
	    	</div>
	    </div>
	  </div>
	<div class="collection-status" v-show="collectionstatus">{{collectiontext}}</div>
	<share :shareshow="shareshow" @shareClose="shareClose"></share>
	<loading :show="showLoading" text="数据加载中"></loading>
	<div class="detail-phone vux-1px-t">
	  	<div class="phone" v-show="DetailSale.status==1">
		  	<div class="care-wrapper">
		  		<label v-if="!isCollection" @click="collection">
		  			<i class="colection-icon"></i>
		  			<span>收藏</span>
		  		</label>
		  		<label v-else @click="deletecollection">
		  			<i class="colection-icon-on"></i>
		  			<span class="colection-origen">已收藏</span>
		  		</label>
		  	</div>
		  	<a class="phone-wrapper" @click="telphonecall">
		  		<i class="phone-icon"></i>
		  		<span>打电话</span>
		  	</a>
	  	</div>
	  	<div class="close-done" v-show="DetailSale.status==2">已下架</div>
	  	<div class="close-done" v-show="DetailSale.status==3">已删除</div>
	</div>
</div>  
</template>

<script>
import { Tab, TabItem, Loading } from 'vux'
import share from '@/components/share/share.vue'
export default {
	data () {
    return {
       nowIndex:0,
       DetailSale: [],
       DetailsellShop: [],
       DetailsellList: [],
       supplyMore:[],
       Detailloading:true,
       DetailStatus:"loading",
       supplyMoreloading:true,
       shareshow: false,
       isReport:0, //0代表可以举报，1代表不可以举报
       isCollection:0,//0代表未收藏，1代表已收藏,
       showLoading: false,
       collectionstatus:false,
       collectiontext:'',
    }
  },
  methods: {
		onItemClick (index) {
	    this.nowIndex=index
	    },
	    shareopen(){
  		this.shareshow = true;
		},
		shareClose() {
			this.shareshow = false;
		},
	    getloadingdata(){
	  		window.location.reload()
	  	},
	  	report(){
			let data = {id : this.$route.params.id}
			axios.post('/api/trade/supply/reportItem',qs.stringify(data)).then( response=>{
				this.isReport = 1;
				this.collectionstatus=true;
				this.collectiontext="举报成功";
				var t=setTimeout(()=>{this.collectionstatus=false;},1000);
			})
		},
		collection(){
			let data = {id : this.$route.params.id,type : 1}
			axios.post('/api/trade/supply/collectionItem',qs.stringify(data)).then( response=>{
				this.isCollection = 1;
				this.collectionstatus=true;
				this.collectiontext="收藏成功";
				var t=setTimeout(()=>{this.collectionstatus=false;},1000);
			})
		},
		deletecollection(){
		let data = {id : this.$route.params.id,type : 2}
			axios.post('/api/trade/supply/collectionItem',qs.stringify(data)).then( response=>{
				this.isCollection = 0;
				this.collectionstatus=true;
				this.collectiontext="已取消收藏";
				var t=setTimeout(()=>{this.collectionstatus=false;},1000);
			})	
		},
		telphonecall(){
			let data = {id : this.$route.params.id};
			axios.post('/api/trade/supply/dialItem',qs.stringify(data)).then( response=>{
				location.href = 'tel:' + this.DetailSale.contact_mobile
			})	
		},
		getData(){
			this.showLoading = true
			axios.get('/api/trade/supply/getDetail',{
				params: {
					id: this.$route.params.id
				}
			}).then(response => {
				this.DetailSale = response.data.resp_data;
				this.isReport = this.DetailSale.report;
				this.isCollection = this.DetailSale.collection;
				this.showLoading = false;
			});
		   axios.get('/api/trade/supply/getDetailSub',{
				params: {
					id: this.$route.params.id
				}
			}).then(response => {
				this.DetailsellShop = response.data.resp_data.shop;
				this.DetailsellList = response.data.resp_data.dataList;
				if(!response.data.resp_data.dataList.length){
					this.Detailloading = true;
					this.DetailStatus="noData";
				};
				this.Detailloading = false;
			}).catch(function (error){
				this.Detailloading = false;
	            this.DetailStatus="error";
			});
			axios.get('/api/trade/supply/getDetailMoers',{
				params: {
					id: this.$route.params.id
				}
			}).then(response => {
				this.supplyMore = response.data.resp_data;
				this.supplyMoreloading = false;
			});
		},
		goTop(){
			window.scrollTo(0,0);
		}
  	},
  mounted() {
	this.getData()
  },
  watch:{
  	$route(to){
  		this.getData();
  		this.goTop();
  	}
  },
  components: {
   Tab,
   TabItem,
   share,
   Loading
  }
}
</script>

<style>
@import url("../../../styles/common/trade/trade-common.css");
.detail-wrapper{width:100%;background:#eee;height:auto;}
.detail-wrapper .detail-img{width: 100%;height:250px;background: none no-repeat scroll center center/cover rgba(0, 0, 0, 0.1);border-bottom:1px solid #eee;}
.detail-wrapper .detali-ifo{padding:10px;background: #fff;}
.detail-wrapper .detali-ifo .ifo-line-one{display: flex;}
.ifo-line-one .name{flex:1;}
.ifo-line-one .name .pre-sale{display: inline-block;color:#ff8b17;border:1px solid #ff8b17;
font-size:12px; padding: 0 4px;margin-right:2px; line-height:17px;border-radius:4px;vertical-align:top;margin-top:2px;}
.ifo-line-one .name .tittle{max-height:50px;line-height:25px;font-size: 18px;color: #333;}
.ifo-line-one .share{flex: 0 0 30px;width:30px;margin-left:30px;}
.ifo-line-one .share .share-icon{display:inline-block;width: 20px;height: 20px;background:url(../../../static/trade-img/xiangqing-share.png) no-repeat center center/cover;
background-size:20px 20px;vertical-align:top;}
.ifo-line-one .share span{display:inline-block;color: #888;font-size: 12px;line-height:20px;margin-top:3px;}
.detail-wrapper .detali-ifo .ifo-line-two{display: flex;height:25px;padding: 5px 0;line-height: 25px;}
.ifo-line-two .price{flex: 0 0 60%;color: #ff782e;}
.ifo-line-two .price big{font-size: 24px;}
.ifo-line-two .price .unit-price{font-size: 16px;}
.ifo-line-two .price .pre-date{font-size: 14px;}
.ifo-line-two .price .mianyi{font-size: 18px;}
.ifo-line-two .size{flex: 1;text-align: right;color:#ff782e;font-size: 14px;}
.ifo-line-two .size span{color:#888;}
.detail-wrapper .detali-ifo .ifo-line-three{display: flex;height:25px;line-height: 25px;font-size:14px;color: #888;}
.ifo-line-three .foods-address{flex:0 0 60%;}
.ifo-line-three .read-time{flex:1;text-align: right;}
.detail-wrapper .detali-ifo .ifo-line-four{display: flex;height:25px;line-height: 25px;font-size:14px;color: #888;padding: 5px 0;}
.ifo-line-four .ifo-report{flex:0 0 60%;}
.ifo-line-four .ifo-report .report-icon{display:inline-block;width: 20px;height: 20px;background:url(../../../static/trade-img/xiangqing-jubao.png) no-repeat center center/cover;
background-size:20px 20px;vertical-align:top;}
.report-done{color:red;}
.report-done .report-icon-done{display:inline-block;width: 20px;height: 20px;background:url(../../../static/trade-img/xiangqing-jubao-done.png) no-repeat center center/cover;
background-size:20px 20px;vertical-align:top;}
.ifo-line-four .update-time{flex:1;text-align:right;}
.detail-wrapper .detali-foods-seller{padding:10px;height:50px;background: #fff;margin: 10px 0;display: flex;line-height:50px;}
.detali-foods-seller .seller-icon{flex: 0 0 50px;width: 50px;height: 50px;margin-right: 10px;background: none no-repeat scroll center center/cover rgba(0, 0, 0, 0.1);border-radius: 50%;}
.detali-foods-seller .seller-icon img{width:100%;border-radius: 50%;}
.detali-foods-seller .seller-msg{flex: 1;overflow: hidden;}
.detali-foods-seller .seller-msg .name{display: inline-block;max-width:150px;vertical-align: middle;font-size: 16px;color: #333;}
.detali-foods-seller .seller-shop{flex:0 0 70px;width:70px;margin-left: 10px;text-align: right; color: #888; font-size: 14px;}
.detali-foods-seller .seller-shop a{color: #888;}
.seller-shop .enter-icon{display:inline-block;width: 10px;height: 18px;background:url(../../../static/trade-img/more_icon.png) no-repeat center center/cover;
background-size:10px 18px;vertical-align:top;margin-top: 15px;}
.tab-item{background: #fff;padding-bottom: 50px;}
.vux-tab .vux-tab-item{font-size: 16px !important;}
.vux-tab .vux-tab-item.vux-tab-selected{color: #008cf0 !important;}
.vux-tab-ink-bar{background-color: #008cf0 !important;}
.details-msg{padding:0 10px;background: #fff;}
.details-msg .main-wapper{display: flex;padding:10px;line-height:25px; font-size: 14px;}
.main-wapper .msg-left{flex: 0 0 80px;color: #888;}
.main-wapper .msg-right{flex:1;margin-left:15px;color: #333;}
.main-wapper .msg-right .need-bq{display: inline-block;color:#008cf0;border:1px solid #008cf0;
font-size:10px; padding: 0 8px;margin-right:5px; line-height:20px;border-radius:10px;vertical-align:center;background:rgba(0,140,240,0.1);}
.img-wrapper{padding:10px;}
.img-wrapper .img{width: 100%;margin-top:5px;}
.img-wrapper .img img{width: 100%;}
.detail-list-remand{padding: 10px 0;}
.detail-list-remand .column{height:30px;line-height:26px;padding:0 10px;}
.detail-list-remand .column .column-icon{display:inline-block;width:22px;height:22px;background:url(../../../static/trade-img/detail-recommend.png) no-repeat center center/cover;
background-size:22px 22px;vertical-align:top;margin-top:3px;margin-right:2px;}
.detail-list-remand .column span{font-size: 16px;color: #333;}
.collection-status{position: fixed;top: 200px;left:35%;width:30%;height:100px;background:rgba(0,0,0,0.5);
border-radius:10px;text-align: center;line-height:100px;font-size: 15px;color: #fff; z-index: 10;}
</style>
